<template>
    <div class="win-button" style="-webkit-app-region: drag">
            <Button class="win-button-min" type="text" size="small" @click="minWindow()">
                <Icon type="md-remove"/>
            </Button>
            <Button class="win-button-max" type="text" size="small" @click="maxWindow()">
                <Icon type="md-square-outline"/>
            </Button>
            <Button class="win-button-close" type="text" size="small" @click="closeWindow()">
                <Icon type="md-close"/>
            </Button>
    </div>
</template>

<script>
    const {remote, ipcRenderer} = require('electron')
    export default {
        name: "WinButton",
        data() {
            return {
                username: "",
                logoPath: "~@/assets/logo.png"
            }
        },
        methods: {
            minWindow() {
                ipcRenderer.send('min-window', remote.getCurrentWindow().id)
            },
            maxWindow() {
                ipcRenderer.send('max-window', remote.getCurrentWindow().id)
            },
            closeWindow() {
                ipcRenderer.send('close-window', remote.getCurrentWindow().id)
            }
        }
    }
</script>

<style scoped>
    .win-button {
        width: 100%;
        height: 28px;
    }
    .win-button-min, .win-button-max, .win-button-close {
        position: absolute;
        top: 3px;
        -webkit-app-region: no-drag;
    }
    .win-button-min {
        right: 73px;
    }
    .win-button-max {
        right: 38px;
    }
    .win-button-close {
        right: 3px;
    }
</style>